<template>
  <div class="card-container">
    <!-- 搜索区域 -->
    <div class="search-container">
      <span class="search-label">车牌号码：</span>

      <el-input clearable placeholder="请输入内容" class="search-main" v-model="params.carNumber"/>
      <span class="search-label">车主姓名：</span>

      <el-input clearable placeholder="请输入内容" class="search-main" v-model="params.personName"/>
      <span class="search-label">状态：</span>

      <el-select v-model="params.cardStatus">
        <el-option v-for="item in cardStatusList" :key="item.id" 
        :value="item.id"
        :label="item.name"
        />
      </el-select>

      <el-button type="primary" class="search-btn" @click="search">查询</el-button>

    </div>

    <!-- 新增删除操作区域 -->
    <div class="create-container">
      <el-button type="primary" @click="$router.push('/cardAdd')">添加月卡</el-button>

      <el-button @click="delCardList">批量删除</el-button>

    </div>

    <!-- 表格区域 -->
    <div class="table">
      <el-table style="width: 100%" :data="cardList" @selection-change="handleSelectionChange">
         <el-table-column
      type="selection"
      width="55">
    </el-table-column>
        <el-table-column type="index" label="序号" />
    <el-table-column label="车主名称" prop="personName" />
    <el-table-column label="联系方式" prop="phoneNumber" />
    <el-table-column label="车牌号码" prop="carNumber" />
    <el-table-column label="车辆品牌" prop="carBrand" />
    <el-table-column label="剩余有效天数" prop="totalEffectiveDate" />
    <el-table-column label="状态" prop="cardStatus" :formatter="formatStatus" />
        <el-table-column label="操作" fixed="right" width="180">
          <template #default="scope">
            <el-button size="mini" type="text">续费</el-button>

            <el-button size="mini" type="text">查看</el-button>

            <el-button size="mini" type="text" @click="edit(scope.row.id)">编辑</el-button>

            <el-button size="mini" type="text" @click="del(scope.row.id)">删除</el-button>

          </template>

        </el-table-column>
         
      </el-table>

    </div>

    <div class="page-container">
      <el-pagination
        layout="total, prev, pager, next"
        :page-size="params.pageSize"
        :total="total"
         @current-change="pageChange"
      />
    </div>

    <!-- 添加楼宇 -->
    <el-dialog
      title="添加楼宇"
      width="580px"
    >
      <!-- 表单接口 -->
      <div class="form-container">
      
        <!-- <el-form ref="addForm" :model="addForm" :rules="addFormRules">
          <el-form-item label="楼宇名称" prop="name">
            <el-input v-model="addForm.name" />
          </el-form-item>

          <el-form-item label="楼宇层数" prop="floors">
            <el-input v-model="addForm.floors" />
          </el-form-item>

          <el-form-item label="在管面积" prop="area">
            <el-input v-model="addForm.area" />
          </el-form-item>

          <el-form-item label="物业费" prop="propertyFeePrice">
            <el-input v-model="addForm.propertyFeePrice" />
          </el-form-item>

        </el-form> -->
      </div>

      <template #footer>
        <el-button size="mini">取 消</el-button>

        <el-button size="mini" type="primary">确 定</el-button>

      </template>

    </el-dialog>

  </div>

</template>


<script>
import {delCardListAPI} from '@/api/user'

// 月卡状态映射
const CARD_STATUS_MAP = {
  0: '可用',
  1: '已过期'
}

/**
 * 月卡管理组件
 * 功能：
 * 1. 月卡列表展示
 * 2. 月卡查询
 * 3. 月卡新增
 * 4. 月卡编辑
 * 5. 月卡删除（单个/批量）
 */
export default {
data() {
  return {
    cardLists:[],//批量删除时，获取id数组
    id:null,//编辑时，获取id
    params: {
      page: 1,//页码
    pageSize: 5,//每页条数
    carNumber: null,//车牌号码
    personName:null,//车主姓名
     cardStatus: null
},
     total: 0, //总条数
    cardList:[],//月卡信息数据
    // 月卡状态设置
    cardStatusList:[
    {
          id: null,
          name: '全部'
        },
        {
          id: 0,
          name: '可用'
        },
        {
          id: 1,
          name: '已过期'
        }
    ] 
    }
  },
  // 挂载时渲染月卡信息数据
  mounted() {
  this.renderCardList()
  // 判断是否有id，如果有就调用edit方法
  if(this.id)
  {this.edit(this.id)}
  },
  methods: {
    /**
     * 处理表格多选事件
     * 1. 获取选中行的ID数组
     * 2. 更新cardLists用于批量删除
     * @param {Array} selects 选中的行数据
     */
    handleSelectionChange(selects) {
      this.cardLists = selects.map(item => item.id)
    },
    
    /**
     * 批量删除月卡
     * 1. 弹出确认对话框
     * 2. 调用store action执行批量删除
     * 3. 删除成功后刷新列表
     * 4. 显示操作结果提示
     * @returns {Promise<void>}
     */
    async delCardList() {
      this.$confirm('你将永久删除选择的所有月卡, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await this.$store.dispatch('user/delCardList', this.cardLists)
        this.renderCardList()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      })
    },



    /**
     * 执行查询操作
     * 1. 重置页码为第一页
     * 2. 重新获取月卡列表数据
     */
    search() {
      this.params.page = 1
      this.renderCardList()
    },
    
    /**
     * 获取月卡列表数据
     * 1. 调用store action获取数据
     * 2. 更新总条数和列表数据
     * @returns {Promise<void>}
     */
    async renderCardList() {
      const {rows, total} = await this.$store.dispatch('user/getCardList', this.params)
      this.total = total
      this.cardList = rows
    },
    
    /**
     * 格式化月卡状态显示
     * @param {Object} row 当前行数据
     * @returns {string} 格式化后的状态文本
     */
    formatStatus(row) {
      return CARD_STATUS_MAP[row.cardStatus]
    },
    
    /**
     * 处理分页切换
     * @param {number} page 当前页码
     */
    pageChange(page) {
      this.params.page = page
      this.renderCardList()
    },
    
    /**
     * 删除单个月卡
     * 1. 弹出确认对话框
     * 2. 调用store action执行删除
     * 3. 删除成功后刷新列表
     * 4. 显示操作结果提示
     * @param {string} id 月卡ID
     */
    del(id) {
      this.$confirm('此操作将永久删除该月卡, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await this.$store.dispatch('user/delCard', id)
        this.renderCardList()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch((err) => {
        console.log(err)
      })
    },
    
    /**
     * 编辑月卡信息
     * 1. 跳转到月卡编辑页面
     * 2. 传递当前月卡ID
     * @param {string} id 月卡ID
     */
    edit(id) {
      this.$router.push({
        path: '/cardAdd',
        query: { id }
      })
    },
  },
}

</script>


<style lang="scss" scoped>
.card-container {
  padding: 20px;
  background-color: #fff;
}


.search-container {
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgb(237, 237, 237, .9);
  padding-bottom: 20px;
  .search-main {
    width: 220px;
    margin-right: 10px;
  }
  .search-btn{
    margin-left:20px;
  }
}
.create-container{
  margin: 10px 0px;
}
.page-container{
  padding:4px 0px;
  text-align: right;
}
.form-container{
  padding:0px 80px;
}
</style>
